<!DOCTYPE html>
<html lang="en" th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'photos')}"
      xmlns:th="http://www.thymeleaf.org">

<th:block th:fragment="content">

    <div class="page" id="body-wrap">
        <!-- 头部导航栏 -->
        <header class="not-top-img" id="page-header">
            <nav th:replace="~{modules/nav :: nav(title = null)}"></nav>
        </header>
        <main class="layout hide-aside" id="content-inner">
            <div id="page">
                <th:block th:if="${#strings.equals(theme.config.photos.photosStyle, 'default')}">
                    <th:block th:each="group : ${photoFinder.groupBy()}">
                        <th:block th:if="${#strings.equals(group.metadata.name, param.photo_group_name)}" th:with="description = ${#annotations.get(group, 'description')},
                         background = ${#annotations.get(group, 'background')}">
                            <th:div th:replace="~{macro/author-content :: author-content(background = ${background},
                        smallTitle = '相册集',
                        bigTitle = ${group.spec.displayName},
                        detail = ${description},
                        buttonUrl = '',
                        buttonTitle = '')}" />
                        </th:block>
                    </th:block>
                    <div id="article-container">
                        <section class="timeline page-1 loadings">
                            <div class="type-gallery ">
                                <div class="gallery">
                                    <div class="fj-gallery-item"
                                         th:each="photo : ${photoFinder.listBy(param.photo_group_name)}">
                                        <div class="tag-address">[[${photo.spec.displayName}]]</div>
                                        <img th:src="${photo.spec.url}" th:alt="${photo.spec.description}"
                                             th:title="${photo.spec.description}">

                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </th:block>

                <div class="gallery-groups" th:if="${#strings.equals(theme.config.photos.photosStyle, 'one')}">
                    <th:block th:each="group : ${photoFinder.groupBy()}">
                        <h1 style="margin: 8px 0px 20px"  th:if="${#strings.equals(group.metadata.name, param.photo_group_name)}">
                            [[${group.spec.displayName}]]
                        </h1>
                    </th:block>
                    <div id="article-container">
                        <section class="timeline page-1 loadings">
                            <div class="type-gallery ">
                                <div class="gallery">
                                    <div class="fj-gallery-item"
                                         th:each="photo : ${photoFinder.listBy(param.photo_group_name)}">
                                        <div class="tag-address">[[${photo.spec.displayName}]]</div>
                                        <img th:src="${photo.spec.url}" th:alt="${photo.spec.description}"
                                             th:title="${photo.spec.description}">

                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
                <style>
                    .gallery-groups {
                        box-shadow: var(--heo-shadow-border);
                        padding: 1rem 2rem;
                        border-radius: 12px;
                        background: var(--heo-card-bg);
                        border: var(--style-border);
                        width: 100%;
                        align-self: flex-start;
                        animation: slide-in 0.6s 0.1s backwards;
                    }

                    #content-inner .loadings .type-gallery {
                        opacity: 0
                    }

                    .loadings {
                        height: 60px;
                        background-position: center;
                        background-repeat: no-repeat;
                        color: #504e4e;
                        border: none;
                        background-size: auto 100%;
                        box-shadow: none;
                        background-color: inherit;
                        background-image: none;
                        background-image: url(/themes/theme-hao/assets/images/load/rotating-ball-o.svg)
                    }

                    #article-container .type-gallery {
                        overflow: hidden;
                        margin-top: 40px;
                    }

                    #content-inner .gallery {
                        margin: 0 0 16px;
                        text-align: center
                    }

                    #content-inner .gallery .fj-gallery {
                        opacity: 0;
                        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        filter: alpha(opacity=0)
                    }

                    #content-inner .gallery .fj-gallery .img-alt {
                        display: none
                    }

                    #content-inner .gallery .fj-gallery.lazyload+button {
                        display: inline-block
                    }

                    #content-inner .gallery .fj-gallery .gallery-data {
                        opacity: 0;
                        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        filter: alpha(opacity=0);
                        visibility: hidden
                    }

                    #content-inner .gallery button {
                        display: none;
                        margin-top: 25px;
                        padding: 10px;
                        width: 9em;
                        border-radius: 5px;
                        background: var(--btn-bg);
                        color: var(--btn-color);
                        font-weight: 700;
                        font-size: 1.1em;
                        -webkit-transition: all .3s;
                        -moz-transition: all .3s;
                        -o-transition: all .3s;
                        -ms-transition: all .3s;
                        transition: all .3s
                    }

                    #content-inner .gallery button>* {
                        -webkit-transition: all .4s;
                        -moz-transition: all .4s;
                        -o-transition: all .4s;
                        -ms-transition: all .4s;
                        transition: all .4s
                    }

                    #content-inner .gallery button i {
                        opacity: 1;
                        -ms-filter: none;
                        filter: none;
                        font-size: 1.1rem
                    }

                    #content-inner .gallery button:hover {
                        background: var(--btn-hover-color)
                    }

                    #content-inner .gallery button:hover i {
                        margin-left: 2px
                    }

                    #article-container .tag-address {
                        display: flex;
                        position: absolute;
                        left: 8px;
                        top: 8px;
                        padding: 4px 6px;
                        border-radius: 8px;
                        background: var(--heo-black-op);
                        font-size: 12px;
                        color: var(--heo-white);
                        transition: .3s;
                        z-index: 1;
                        user-select: none
                    }

                    img {
                        border-style: none;
                        border-radius: 8px;
                        max-width: 100%;
                        transition: all .2s ease 0s;
                        -webkit-user-drag: none;
                        -khtml-user-drag: none;
                        -moz-user-drag: none;
                        -ms-user-drag: none;
                        user-drag: none
                    }
                </style>
                <!--/* 评论组件 */-->
                <th:block th:replace="~{modules/comment :: comment(group = 'content.halo.run',
                  kind = 'SinglePage',
                  name = 'moments',
                  allowComment = true)}" />
            </div>

        </main>
        <!-- 底部 -->
        <footer th:replace="~{modules/footer :: footer}"></footer>
        <!-- 卡片顶部气泡效果 -->
        <script th:if="${theme.config.other.bubbleEnable}" async data-pjax
                th:src="${assets_link + '/libs/canvas/bubble.js'}"></script>
    </div>

</th:block>

</html>